<template>
  <view>
    <view class="bg-top">
      
      <view class="ad">活动广告</view>
      
      <view class="dingwei">
        <image class="icon" src="/static/icons/home-dingwei.png"></image>
        <view class="address text-cut">国际会展中心</view>
        <image class="icon" src="/static/icons/home-saoma.png"></image>
      </view>
      
      <view class="wrap">
        <view class="search" @click="$goto('/pages/home/sosuo')">
          <u-icon size="32" name="search"></u-icon>
          <view class="f-center u-p-l-8">请输入您想搜索的商品</view>
        </view>
      </view>

      <view class="wrap">
        <u-swiper :list="list"></u-swiper>
      </view>

      <view class="wrap">
        <image src="https://ae01.alicdn.com/kf/U2ad8ede5cba94f6ba73331e1687bcc48L.jpg" style="width: 100%;height: auto;"
          mode="widthFix"></image>
      </view>

      <view class="wrap padding bg-white">
        <u-grid :col="5" :border="false">
          <u-grid-item v-for="i in 10" :key="i">
            <u-icon name="photo" :size="46"></u-icon>
            <view class="grid-text">图片</view>
          </u-grid-item>
        </u-grid>
      </view>

      <huodong />
    </view>

    <view class="bg-white">
      <view class="tabs">
        <view class="tab" :class="{ on: currentTab == i.id }" v-for="i in tabs" :key="i.id" @click="tabChange(i.id)">
          <view class="title">{{i.title}}</view>
          <view class="sub">{{i.sub}}</view>
        </view>
      </view>
    </view>
    
    <view class="bg-btm" v-show="currentTab == 1 || currentTab == 3">
      <view class="gap-24" v-for="i in 5" :key="i" @click="$goto('/pages/shop/index')">
        <shop></shop>
      </view>
    </view>
    
    <view class="bg-btm" v-show="currentTab == 2 || currentTab == 4">
      <card v-for="i in 5" :key="i" @click.native="$goto('/pages/shop/good')"></card>
    </view>
  </view>
</template>

<script>
  import card from './components/card.vue'
  import shop from './components/shop.vue'
  import huodong from './components/huodong.vue'
  export default {
    components: {
      card,
      shop,
      huodong
    },
    data() {
      return {
        list: [{
            image: 'https://ae01.alicdn.com/kf/U2e095482c6404d2ab53a267bfc6ae390x.jpg',
            title: '昨夜星辰昨夜风，画楼西畔桂堂东'
          },
          {
            image: 'https://ae01.alicdn.com/kf/U2e095482c6404d2ab53a267bfc6ae390x.jpg',
            title: '身无彩凤双飞翼，心有灵犀一点通'
          },
          {
            image: 'https://ae01.alicdn.com/kf/U2e095482c6404d2ab53a267bfc6ae390x.jpg',
            title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
          }
        ],
        tabs: [{
            id: 1,
            title: '推荐店铺',
            sub: '为你推荐'
          },
          {
            id: 2,
            title: '电器',
            sub: '3C家电'
          },
          {
            id: 3,
            title: '服装',
            sub: '时尚潮流'
          },
          {
            id: 4,
            title: '生活',
            sub: '居家日用'
          },
        ],
        currentTab: 1
      };
    },
    methods: {
      tabChange(id) {
        this.currentTab = id
      }
    }
  }
</script>

<style lang="scss">
  .ad {
    width: 702rpx;
    height: 80rpx;
    background: #ff4500;
    border: 2px solid #fce8c8;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 24rpx;
    color: #fff;
    margin-bottom: 16rpx;
  }
  
  .dingwei {
    width: 702rpx;
    height: 70rpx;
    color: #fff;
    font-size: 36rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    
    .address {
      width: 580rpx;
    }
    
    .icon {
      width: 52rpx;
      height: 52rpx;
    }
  }
  
  .bg-top {
    background: #f6ad3c;
    padding: 24rpx;

    .wrap {
      border-radius: 16rpx;
      margin: 24rpx 0;
      overflow: hidden;
      padding: 0;

      &.padding {
        padding: 24rpx;
      }
    }
  }

  .search {
    width: 100%;
    height: 58rpx;
    background: #fff;
    border-radius: 29rpx;
    color: #C3C3C3;
    font-size: 26rpx;
    display: flex;
    justify-content: center;
    align-content: center;
  }

  .bg-btm {
    background: #ececec;
    padding: 24rpx;
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
  }

  .tabs {
    width: 750rpx;
    height: 100rpx;
    display: flex;

    .tab {
      width: 25%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .title {
      color: #000;
      font-size: 28rpx;
      font-weight: bold;
    }

    .sub {
      color: #999999;
      font-size: 18rpx;
    }

    .on {

      .title,
      .sub {
        color: #FF9935;
      }
    }
  }
</style>
